<template>
  <div class="main">
    <section>
      <!--首页图片列表-->
      <el-table :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
        <el-table-column align="center" label="图片位置" prop="position">
          <template slot-scope="scope">
            {{scope.row.title}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="图片">
          <template slot-scope="scope">
            <img :src="scope.row.url" height="90" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="显示/隐藏">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isEnable"
              :active-value="1"
              :inactive-value="0"
              active-color="#13ce66"
              @change="saveBanner(scope.row, 'switch', scope.$index)"
              :disabled="!rightsButtons['visible']"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column align="center" label="添加时间">
          <template slot-scope="scope">
            <span>{{scope.row.createAt}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="更新时间">
          <template slot-scope="scope">
            <span>{{scope.row.updateAt}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" v-if="rightsButtons['edit']">
          <template slot-scope="scope">
            <el-button size="mini" type="primary"  @click="getInfo(scope.$index)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </section>

    <!--编辑图片-->
    <el-dialog
      title="编辑"
      :visible.sync="dialogVisible"
      width="300">
      <el-form :model="picForm" size="medium" ref="form" label-width="120px">
        <el-form-item label="图片:" prop="tagImage">
          <el-upload
            class="avatar-uploader"
            accept="image/*"
            :action="upladUrl"
            name="file"
            :show-file-list="false"
            :on-success="uploadSuccess"
            :before-upload="beforeUpload">
            <img v-if="picForm.url" :src="picForm.url" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="起止时间:" prop="url">
          <el-radio-group v-model="picForm.isForever">
            <el-radio border :label="1">不限</el-radio>
            <el-radio border :label="0">限定时间</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="url" v-if="picForm.isForever===0">
          <el-date-picker
            v-model="date"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
            align="right">
          </el-date-picker>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="saveBanner">确 定</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<script>
  import { getBannerList, updateBannerList } from '@/api/advert'
  import { parseTime } from '@/utils'
  export default {
    name: "indexBg",
    data() {
      return {
        current:0,
        dialogVisible: false,
        listLoading: false,
        // 图片编辑
        date: [],
        picForm: {},
        list: []
      }
    },
    created() {
      this.getBanner()
    },
    watch: {
      date(value) {//监听date的变化，并改变form.date的数据
        this.picForm.timeRange = value; //划重点
      }
    },
    methods: {

      //  获取背景图片列表
      getBanner(){
        getBannerList().then(res => {
          this.list = res.data
          // console.log(this.list)
        })
      },

      // 修改背景图片
      saveBanner(value, opera, index) {
        let param
        if(opera=='switch'){
          this.current = index
          param = value
        } else {
          if(!this.picForm.timeRange){
            this.picForm.timeRange = []
          }
          // 如果选择了限制时间，但是时间为空值
          if(this.picForm.isForever == 0 && (this.picForm.timeRange.length<2)){
            this.$message({
              message: '请选择正确的时间范围',
              type: 'error'
            })
            return false
          }
          // 填入选择的开始结束 时间
          this.picForm.startDate = this.picForm.timeRange[0]
          this.picForm.endDate = this.picForm.timeRange[1]
          param = this.picForm
        }
        updateBannerList(param).then(res => {
          this.$message({
            message:res.message,
            type: 'success'
          })
          this.list[this.current].url = param.url
          this.list[this.current].updateAt = parseTime(new Date())
          this.picForm.updateAt = parseTime(new Date())
          this.list[this.current] = JSON.parse(JSON.stringify(param))
        })
        this.dialogVisible = false
      },

      //  获取需要编辑的数据
      getInfo(index) {
        this.current = index
        this.dialogVisible = true
        this.picForm = JSON.parse(JSON.stringify(this.list[index]))
        if(this.picForm.isForever===null) {
          this.picForm.isForever = 1
        }else if(this.picForm.isForever===0){
          // 填入开始结束时间
          this.date = [this.picForm.startDate, this.picForm.endDate ]
        }
      },

      //  图片上传成功
      uploadSuccess(res) {
        // console.log(this.replaceImgUrl(res.filePath))
        this.picForm.url = this.replaceImgUrl(res.filePath);
      },


    },
  }
</script>

<style scoped>

  .main>section{
    padding: 24px;
    background: #fff;
  }
</style>
